<template>
  <div style="padding-bottom: 32px;">
    <div class="nameLabel">学习漏斗图</div>
    <ve-funnel :data="chartData" :settings="chartSettings" legend-position="bottom"></ve-funnel>

  </div>
</template>

<script>

  import {Empty} from 'vant'

  Vue.use(Empty)

  export default {
    name: "FunnelChart",
    props: {
      countList: {
        type: Object,
        default: []
      }
    },
    watch: {
      // countList: function (val) {
      //   this.chartData.rows = val
      // }
    },
    data() {
      let that = this
      this.chartSettings = {
        dataType: function (v) {

          console.log(that.countList)
          let count
          if (v == 900) {
            count = that.countList[0]["数值"]
          } else if (v == 600) {
            count = that.countList[1]["数值"]
          } else {
            count = that.countList[2]["数值"]
          }
          return count
        }
      }
      return {
        screenW: document.body.clientWidth,
        chartData: {
          columns: ['类型', '数值'],
          rows: [{'类型': '学习课程', '数值': 900}, {
            '类型': '参加考试',
            '数值': 600
          }, {'类型': '领取证书', '数值': 300}]
        }
      }
    },
    computed: {
      chartHeight() {
        return this.screenW * 0.72 + 'px'
      }
    }
  }
</script>

<style scoped>
  .nameLabel {
    font-size: 16px;
    font-weight: bold;
    margin-left: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
</style>
